<template>
  <el-col class="search" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
    <div class="logo"></div>

    <div class="searchBox">
      <el-input
        autofocus
        placeholder="请输入内容"
        v-model="user.inSongsName"
        clearable
      ></el-input>

      <img @click="search" src="../../assets/img/search.png" />
    </div>
  </el-col>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      user: {
        inSongsName: "喜欢",
      },
    };
  },

  methods: {
    search() {
      this.$store.dispatch("usInputComplete", this.user.inSongsName);
    },
  },

  mounted() {
    this.search();
  },
};
</script>

<style scoped lang="less">
.search {
  display: flex;
  justify-content: space-between;
  height: 60px;
  background-color: #1eacda;

  .logo {
    margin-left: 10px;
    width: 100px;
    height: 100%;
    background-size: 70px 33px;
    background-position: 10px;
    background-image: url("../../assets/img/logo.png");
    background-repeat: no-repeat;
  }

  .searchBox {
    position: relative;
    display: flex;
    margin-right: 10px;
    align-items: center;

    .el-input {
      width: 300px;
    }

    img {
      position: absolute;
      width: 20px;
      right: 45px;
      cursor: pointer;
    }
  }
}
</style>